<template>
	<view>
		<uni-nav-bar  left-icon="arrowthinleft" title="绑定手机号" :fixed="true" :border="false" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="padding-x-40 bg-fff">
			<view>
				<view class="flex align-center padding-y-30 margin-bottom-10 solid-bottom">
					<input class="flex1 fs-32 color-000" type="number" placeholder="请输入手机号" v-model="info.mobile" />
				</view>
				<view class="flex align-center padding-y-20 margin-bottom-10 solid-bottom">
					<input class="flex1 fs-32 color-000" type="text" placeholder="请输入图形验证码" v-model="code.captcha" />
					<image class="login_code_img" :src="src" mode="aspectFill" @tap="init()"></image>
				</view>
				<view class="flex align-center padding-y-20 margin-bottom-10 solid-bottom">
					<input class="flex1 fs-32 color-000" type="text" placeholder="请输入验证码" v-model="info.code" />
					<button :disabled="code.status" class="login_code" @tap="getCode()">{{code.text}}</button>
				</view>
				<view class="flex align-center padding-y-30 margin-bottom-10 solid-bottom">
					<input class="flex1 fs-32 color-000" type="password" placeholder="请设置登录密码" v-model="info.loginpass" />
				</view>
				<view class="flex align-center padding-y-30 margin-bottom-10 solid-bottom">
					<input class="flex1 fs-32 color-000" type="password" placeholder="请确认登录密码" v-model="info.quepass" />
				</view>
			</view>
		</view>
		<view class="padding-x-40">
			<view class="margin-top-88">
				<button class="public_btn" @tap="submit()">提交</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:'',
				uuid:'',
				code: {
					text: '获取验证码',
					status: false,
					captcha:'',
				},
				info:{
					mobile:'',
					code:'',
					loginpass:'',
					quepass:'',
				}
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			init(){
				this.$api.get_img_code().then(res=>{
					if(res.code == 1){
						this.src = res.data.img_src;
						this.uuid = res.data.uuid;
					}
				})
			},
			getCode(){ 
				let data = {
					mobile:this.info.mobile,
					type:'bind',
					uuid:this.uuid,
					captcha:this.code.captcha
				}
				let countdown = 60;
				this.code.status = true;
				this.$api.send_sms(data).then(res => {
					console.log(res)
					this.$msg(res.msg);
					if (res.code == 1) {
						this.code.text = countdown + '秒后重新获取';
						this.code.status = true;
						let timer = setInterval(() => {
							if (countdown > 0) {
								this.code.text = countdown - 1 + '秒后重新获取';
								countdown--;
							} else {
								clearInterval(timer);
								this.code.text = '获取验证码';
								this.code.status = false;
							}
						}, 1000);
					} else {
						this.code.status = false;
					}
				});
			},
			submit(){
				this.$api.bindMobile(this.info).then(res=>{
					this.$msg(res.msg);
					if(res.code == 1){
						uni.setStorageSync("hhToken", res.data.token.access_token);
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/index/index`
							})
						}, 200);
					}
				})
			}
		}
	};
</script>

<style lang="scss" >
	
</style>
